<template>
  <div
    class="radio_warpper"
    @mouseenter.stop="onMouseOver"
    @mouseleave.stop="onMouseLeave"
    @click.stop="handleExam"
  >
    <template v-if="exam.status === 'basic' || exam.status === 'edit'">
      <div :class="`radio_content_${exam.status}`" class="radio_content">
        <div class="radio_stem">
          <!-- 标题组件 -->
          <Stem
            :require="exam.require"
            :questNum="exam.questNum"
            :title="exam.title"
          />
        </div>
        <!-- 单选组 -->
        <a-radio-group v-model:value="defaultValue" @change="onChange">
          <template v-for="item in exam.options" :key="item.displayOrder">
            <a-radio :style="radioStyle" :value="item.displayOrder">
              {{ item.content }}
            </a-radio>
          </template>
        </a-radio-group>
      </div>

      <div class="hover_warpper">
        <template v-if="hover">
          <EditinExam :questNum="exam.questNum" :exam="exam" />
        </template>
      </div>
    </template>

    <template v-else-if="exam.status === 'answer'">
      <a-form-item
        :class="`radio_content_${exam.status}`"
        class="radio_content"
        :label="`${exam.questNum}. ${matchReg(exam.title)}`"
        :name="[exam.questNum - 1, 'answerChose']"
        :rules="{
          required: true,
          message: `请选择${matchReg(exam.title)}`,
          trigger: 'change',
          type: 'number',
        }"
      >
        <a-radio-group v-model:value="exam.answerChose" @change="onChange">
          <template v-for="item in exam.options" :key="item.displayOrder">
            <a-radio :style="radioStyle" :value="item.displayOrder">
              {{ item.content }}
            </a-radio>
          </template>
        </a-radio-group>
      </a-form-item>
    </template>

    <template v-else-if="exam.status === 'statistics'">
      <!-- {{ exam }} -->
      <div :class="`radio_content_${exam.status}`" class="radio_content">
        <div class="radio_stem">
          <!-- 标题组件 -->
          <Stem
            :require="exam.require"
            :questNum="exam.questNum"
            :title="exam.title"
          />
        </div>
        <!-- 单选组 -->
        <OptionResult :data="exam.chooseInfos" />
      </div>
    </template>

    <template v-else-if="exam.status === 'unknow'"> unknow </template>

    <template v-if="exam.status === 'edit'">
      <ExitExamForSelect
        :exam="exam"
        :examList="examList"
        @mouseenter.stop="onMouseLeave"
        @mouseleave.stop="onMouseOver"
      />
    </template>
  </div>
</template>
<script lang="ts">
import { ExamItem } from '@/store/design/types';
import { defineComponent, reactive, ref } from 'vue';
import EditinExam from './common/EditinExam.vue';
import ExitExamForSelect from './common/ExitExamForSelect.vue';
import Stem from './common/Stem.vue';
import { matchReg } from '@/library/util/remove-label';
import OptionResult from './common/OptionResult.vue';

export default defineComponent({
  components: { EditinExam, ExitExamForSelect, Stem, OptionResult },
  props: {
    exam: { type: ExamItem, required: true },
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
    // index: { type: Number, default: 0 },
  },
  emits: ['handleExam'],
  setup(props, { emit }) {
    const radioStyle = reactive({
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    });
    const defaultValue = ref<null>(null);

    const onChange = () => {
      defaultValue.value = null;
    };

    const hover = ref<boolean>(false);

    const onMouseOver = () => {
      if (props.exam.status === 'edit') {
        hover.value = false;
      } else {
        hover.value = true;
      }
    };

    const onMouseLeave = () => {
      if (props.exam.status === 'edit') {
        hover.value = false;
      } else {
        hover.value = false;
      }
    };

    const handleExam = () => {
      // hover.value = false;
      if (props.exam.status === 'edit') {
        hover.value = true;
      } else {
        hover.value = false;
      }
      emit('handleExam', props.exam);
    };
    return {
      radioStyle,
      onMouseOver,
      hover,
      onMouseLeave,
      handleExam,
      defaultValue,
      onChange,
      matchReg,
    };
  },
});
</script>
<style lang="less" scoped>
.radio_warpper {
  border-bottom: 1px solid @border-color;
  .radio_content {
    padding: 30px 36px 0;
  }
  .hover_warpper {
    width: 100%;
    height: 49px;
    padding: 12px 12px 12px 0;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
<style lang="less" scoped>
// .radio_content_basic {
//   // padding: 30px 36px 0;
// }
</style>
